<template>
  <div
    class="t-button"
    :class="[
      `t-button-size__${props.size}`,
      `t-button__${props.type}`,
      props.round && 't-button__round',
      props.plain && `t-button-plain__${props.type}`,
    ]"
    @click="onClick"
  >
    <slot></slot>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps({
  size: {
    type: String,
    default: "primary",
    validator: (size: string) => {
      return ["mini", "small", "primary", "big", "max", "xm"].includes(size);
    },
  },
  type: {
    type: String,
    default: "primary",
    validator: (type: string) => {
      return ["primary", "success", "warning", "error", "info"].includes(type);
    },
  },
  round: {
    type: Boolean,
    default: false,
  },
  plain: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["click"]);

const onClick = () => {
  emits("click");
};
</script>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Button",
});
</script>
